<template>
<h1>{{ info }}</h1>
<!--  v-model="变量",让控件的值和变量进行双向绑定(变量会影响控件的值,控件的值改变也会影响变量)-->
  <input type="text" v-model="info">
  <h2>登录界面</h2>
  用户名:<input type="text" placeholder="请输入用户名:" v-model="user.username"><br>
  密码:<input type="password" placeholder="请输入密码:" v-model="user.password"><br>
  <input type="button" value="登录" @click="login()">
</template>

<script setup>
import {ref} from "vue";

const info = ref('双向绑定');
const user = ref({username:"",password:""});
const login = () => {
  console.log(user.value.username+":"+user.value.password);
}
</script>

<style scoped>

</style>